<template>
  <div class="settings-item">
    <div class="header">
      <div class="title">
        输入引导
        <Tooltip
          transfer
          theme="light"
          placement="bottom"
          max-width="400"
          content="提示"
        >
          <Icon type="ios-help-circle-outline" />
        </Tooltip>
      </div>
      <div class="actions">
        <text-button type="normal" @click="visible=true">{{form.isinput ? '开启' : '关闭'}}</text-button>
      </div>
    </div>
  </div>

  <CommonDialog
    title="输入引导"
    v-model="visible"
    :confirmLoading="loading"
    width="500px"
  >
    <Form label-position="left">
      <FormItem label="是否开启" prop="isinput" style="text-align: right;">
        <Switch v-model="form.isinput" />
      </FormItem>
      <FormItem label="词库" prop="lexicon">
        <div class="word-flex">
          <p>{{form.lexicon}}</p>
          <Button icon="md-settings" size="small" @click="showWordSetting = true">配置词库</Button>
        </div>
      </FormItem>
      <FormItem label="自定义词库地址" prop="customurl">
        <Input
          v-model="form.customurl"
          type="textarea"
          placeholder=""
        ></Input>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="visible = false" >取消</Button>
      <Button type="primary" @click="submit">确认</Button>
    </template>
  </CommonDialog>

  <CommonDialog
    title="配置词库"
    v-model="showWordSetting"
    footerHide
    width="500px"
    @cancel="handleWordSettingCancel"
  >
  <div class="word-setting">
    <div class="word-setting-btns">
      <Button icon="ios-trash" size="small" style="margin-right: 10px">清空词库</Button>
      <Button type="primary" size="small" icon="md-add" @click="showNewWord = true">添加</Button>
    </div>
    <Input v-model="newWord" v-show="showNewWord" style="margin-bottom: 10px;">
      <template #suffix>
        <Icon type="md-browsers" size="20" @click.stop="addWord()" />
      </template>
    </Input>
    <CheckboxGroup v-model="words" class="word-setting-list" v-if="wordList.length">
      <Checkbox v-for="(item, index) in wordList" :key="index" class="word-setting-item" :label="item.text">
        <Input v-model="item.text" v-if="wordEditIndex == index">
          <template #suffix>
            <Icon type="md-browsers" size="20" @click.prevent="saveWord()" />
          </template>
        </Input>
        <div class="word-setting-edit" v-else>
          <p class="text">{{ item.text }}</p>
          <div class="action">
            <Icon type="ios-create" size="20" @click.prevent="editWord(index)" class="pointer" />
            <Icon type="ios-trash" size="20" @click.prevent="removeWord(index, item.text)"  class="pointer" />
          </div>
        </div>
      </Checkbox>
  </CheckboxGroup>
  <p class="no-content" v-else>还没有配置词库</p>
</div>

  </CommonDialog>
</template>
<script setup>
import { ref } from 'vue';
import CommonDialog from '@/components/CommonDialog/index.vue';
const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  }
})
// 弹窗显示
const visible = ref(false);
const loading = ref(false);

const newWord = ref('');
const showNewWord = ref(false);
const wordEditIndex = ref(undefined);
const showWordSetting = ref(false);
// 配置词库
const words = ref([])
const wordList = ref([]);
const addWord = () => {
  wordList.value.push({
    text: newWord.value
  })
  newWord.value = '';
  showNewWord.value = false;
}
const editWord = index => {
  wordEditIndex.value = index;
}
const saveWord = () => {
  wordEditIndex.value = undefined;
}
const removeWord = (index, text) => {
  const wordIndex = words.value.findIndex(i => i == text);
  wordList.value.splice(index, 1);
  words.value.splice(wordIndex, 1);
}
const handleWordSettingCancel = () => {
  props.form.lexicon = words.value.length
}
const submit = () => {
  visible.value = false;
};
</script>
<style lang="scss">
.word-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.word-setting {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.word-setting-list {
  width: 100%;
  height: calc(100% - 34px);
  overflow-y: auto;
  .ivu-checkbox-label-text {
    flex: 1;
  }
  .ivu-input-with-suffix {
    padding-right: 50px;
  }
  .ivu-input-suffix {
    width: 50px;
  }
}

.word-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.word-setting-edit {
  width: 436px;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #f7f8fa;
  background-image: none;
  position: relative;
  cursor: text;
  display: flex;
  align-items: center;
  overflow: hidden;
  
  .text {
    width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pointer{
    cursor: pointer;
  }
 
}
.word-setting-btns {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 10px;
}

.no-content {
  height:80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>